<!DOCTYPE HTML>
<html>
	<head>   
		<title>Paginated Autocomplete</title>         	               
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
		<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
		<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.5.1/jquery.mockjax.js"></script>   
		<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/json2/20121008/json2.js"></script>   	 
		<script type="text/javascript" src="https://scotts-jewels.googlecode.com/svn/APaginatedJQueryUIAutocompleteWidget/jsfiddle-demo/scottsjewels-mockdatasource.js"></script>   	 
		<script type="text/javascript" src="https://scotts-jewels.googlecode.com/svn/APaginatedJQueryUIAutocompleteWidget/PaginatedAutocomplete/ScottsJewels.UI/Scripts/jquery-ui-paginatedautocomplete.js"></script>
		<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/ui-lightness/jquery-ui.css"/>
	</head>

	<body>      
		<input id="myFilter" type="text" />     	      

		<script type="text/javascript">

			$(document).ready(function() {

				// Mock up the AJAX.
				$.mockjax({
					url: '/Simpsons/SearchCharacters',         
					dataType: 'json',      
					response: function(settings) {

						var result = ScottsJewels.MockDatasource.paginatedSearch ( 
							settings.data.search, 
							settings.data.pageSize, 
							settings.data.pageIndex );
					
						this.responseText = {
							data	: result.data,
							total	: result.total
						}            
					}          
				});     

				// Paginated Autocomplete Usage.
				var x = $("#myFilter").paginatedAutocomplete({
					pageSize: 10,
					sourceUrl: '/Simpsons/SearchCharacters'
				}); 
			});
		</script>
	</body>
</html>
